<template>
	<view class="content">
		<view class="login_logo">
			<view class="login_logo_item">
				<image src="../../static/img/login.png" style="width: 118rpx;height: 118rpx;" mode=""></image>
				<view class="logo_name">
					梦想课堂
				</view>
			</view>
		</view>
		<view class="form_login">
			<view class="form_phone">
				<input type="text" v-model="phone" placeholder="请输入手机号"
					placeholder-style="font-size:30rpx;color:#999" />
				<view class="error_message" v-if="phoneErr">
					<image src="../../static/img/cuo.png" style="width: 18rpx;height: 18rpx;" mode=""></image>
					<text>手机号格式错误</text>
				</view>
			</view>
			<view class="form_test">
				<input type="text" v-model="code" placeholder="请输入验证码" placeholder-style="font-size:30rpx;color:#999" />
				<view class="test_btn" :class="{'active':phone?'active':''}" @click="getTest">
					{{testMsg}}
				</view>
				<view class="error_message" style="left: 33%;" v-if="testErr">
					<image src="../../static/img/cuo.png" style="width: 18rpx;height: 18rpx;" mode=""></image>
					<text>验证码错误</text>
				</view>
			</view>
			<view class="form_btn" @click="login" :class="{'active':code&&phone?'active':''}">
				登录
			</view>
			<view class="agreement">
				<image src="../../static/img/checked.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
				<view>
					<text>我已阅读并同意</text>
					<text class="agreement_item">《梦想课堂用户协议》</text>
					<text>和</text>
					<text class="agreement_item">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				code: "",
				phoneErr: false,
				testMsg: '获取验证码',
				testNum: "", //验证码
				testErr: false
			}
		},
		methods: {
			//登录
			login() {
				if (this.testNum == this.code) {
					this.testErr = false;
					this.$http.post('/api/dream/login', {
						"account": this.phone,
						"captcha": this.code,
						"password": "",
						"source": 1
					},'application/json').then((data) => {
						if (data.data.code == 200) {
							uni.showToast({
								title: '登录成功!',
								icon: "success",
								duration: 2000,
								success: () => {
									uni.setStorageSync('token', data.data.result);
									uni.switchTab({
										url: '../my/index'
									});
								}
							});
						} else {
							uni.showToast({
								title: data.data.message,
								duration: 2000
							});
						}
					})
				} else {
					this.testErr = true;
				}
			},
			//获取验证码
			getTest() {
				if (!this.testNum) {


					let req = /^[1][3,4,5,7,8,9][0-9]{9}$/;
					let num = 10;
					if (req.test(this.phone)) {
						this.phoneErr = false;
						this.$http.get('/api/dream/getCode/' + this.phone).then((data) => {
							if (data.data.code == 200) {
								uni.showToast({
									title: '发送成功!',
									icon: "success",
									duration: 2000,
									
								});
								this.testNum = data.data.result;
								let timer = setInterval(() => {
									num--;
									this.testMsg = `重新发送(${num})`;
									console.log(this.testMsg)
									if (num < 1) {
										clearInterval(timer);
										this.testMsg = "获取验证码"
									}
								}, 1000)
							} else {
								uni.showToast({
									title: data.data.message,
									duration: 2000
								});
							}
						})

					} else {
						this.phoneErr = true;

					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/login.scss'
</style>
